import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {
    Card, Button, Row, Col, Space,
    Form, Checkbox, message, Tabs,
    Select, DatePicker, Input, Radio,
    InputNumber, Table, Popconfirm,
    Menu, Dropdown, Modal
} from 'antd';
import {
    PlusOutlined,
    ImportOutlined,
    PrinterOutlined,
    SyncOutlined,
    DownOutlined,
    RightOutlined,
    CloseOutlined,
    ExclamationCircleOutlined
} from '@ant-design/icons';
import { connect } from 'umi';
import * as Request from '@/services/Request';
import moment from 'moment';
import CateSelect from '@/components/CategoryComponent';
import PartSelect from '@/components/PartSelect';
import PoSelect from '@/components/PoSelect';
import { VendorSelect, EmpSelect } from '@/components/FormItemSelect';
import ItemSelect from '@/components/ItemSelect';
import getLodop from '@/print/lodop/LodopFuncs';
import PoContract from './poContract';

const { TabPane } = Tabs;
const { confirm } = Modal;
const apiURL = "/api/services/app/POHeader/";
const apiURLPODetail = "/api/services/app/PODetail/";
const apiURLPORel = "/api/services/app/PORel/";
class ViewPage extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            loading: false,
            visible: false,
            data: { poNum: 0 },
            poDetail: { poLine: 0 },
            poRel: {},
            dataSource: [],
            dataSource2: [],
            defTab: '1',
        }
    }
    printArea: any = React.createRef();
    formRef: any = React.createRef();
    componentDidMount() {
    }
    onFinish = (values: any) => {
        values.POHeader.promiseDate = values.POHeader.promiseDate?.format('YYYY-MM-DD');
        Request.put(apiURL + 'Update', values.POHeader).then((response) => {
            if (response) {
                if (response.success) {
                    message.success('保存成功！');
                }
                else {
                    message.error(response.error.message);
                }
                this.setState({ loading: false });
            }
        });

        if (values.PODetail) {
            Request.post(apiURLPODetail + 'Modify', [values.PODetail]).then((response) => {
                if (response) {
                    if (response.success) {
                        message.success('分录保存成功！');
                    }
                    else {
                        message.error(response.error.message);
                    }
                    this.setState({ loading: false });
                }
            });
        }

        if (values.PORel) {
            values.PORel.ium = values.PODetail.ium
            values.PORel.dueDate = values.PORel.dueDate?.format('YYYY-MM-DD');
            values.PORel.promiseDt = values.PORel.promiseDt?.format('YYYY-MM-DD');
            Request.post(apiURLPORel + 'Modify', [values.PORel]).then((response) => {
                if (response) {
                    if (response.success) {
                        message.success('收货行保存成功！');
                    }
                    else {
                        message.error(response.error.message);
                    }
                    this.setState({ loading: false });
                }
            });
        }
    }
    getPO = (e?: any) => {
        if (e.poNum) {
            this.setState({ loading: true });
            Request.get(apiURL + 'GetByNum?num=' + e.poNum).then((response) => {
                if (response) {
                    if (response.success) {
                        if (response.result.success) {
                            var POHeader = response.result.data;
                            if (POHeader.promiseDate)
                                POHeader.promiseDate = moment(POHeader.promiseDate);
                            this.setState({ data: POHeader });
                            this.formRef.current.setFieldsValue({ POHeader });
                            if (POHeader.items)
                                this.getPODetail(POHeader.items);
                        }
                        else {
                            message.error(response.result.message);
                        }
                    }
                    else {
                        message.error(response.error.message);
                    }
                    this.setState({ loading: false });
                }
            });
        }
    }
    getPODetail = (data: any) => {
        var dataDtl = data[0];
        if (dataDtl) {
            this.setState({ dataSource: data, poDetail: dataDtl });
            this.formRef.current.setFieldsValue({ PODetail: dataDtl });
            if (dataDtl.items)
                this.getPORel(dataDtl.items);
        }
    }
    getPORel = (data: any) => {
        var dataRel = data[0];
        this.setState({ dataSource2: data, poRel: dataRel });
        if (dataRel) {
            if (dataRel.dueDate)
                dataRel.dueDate = moment(dataRel.dueDate);
            if (dataRel.promiseDt)
                dataRel.promiseDt = moment(dataRel.promiseDt);
            this.setState({ tranType: dataRel.tranType });
        }
        this.formRef.current.setFieldsValue({ PORel: dataRel });
    }
    newPO = () => {
        const { currentUser } = this.props;
        var value = {
            approvalStatus: 'U',
            poType: 'ipo',
            buyerID: '0',
            termsCode: '0',
            entryPerson: currentUser.userName,
            shipViaCode: '0',
            currencyCode: '0',
        };
        Request.post(apiURL + 'New', value).then((response) => {
            if (response) {
                if (response.success) {
                    message.success('新建订单成功！');
                    var POHeader = response.result.data;
                    this.setState({ data: POHeader });
                    this.formRef.current.setFieldsValue({ POHeader });
                }
                else {
                    message.error(response.error.message);
                }
                this.setState({ loading: false });
            }
        });
    }
    newPODetail = () => {
        const { data } = this.state;
        if (data.poNum == 0) {
            message.warning("请先创建采购订单");
            return;
        }
        var value = {
            poNum: data.poNum,
            partNum: '0',
            lineDesc: '0',
            ium: 'PCS',
            uom: '0',
            classID: '0',
            revisionNum: 'A'
        };
        Request.post(apiURLPODetail + 'New', value).then((response) => {
            if (response) {
                this.setState({ loading: true });
                if (response.success) {
                    var data = response.result.data;
                    this.formRef.current.setFieldsValue({ PODetail: data });
                    this.setState({ poDetail: data, defTab: '2' });
                }
                else {
                    message.error(response.error.message);
                }
                this.setState({ loading: false });
            }
        });
    }
    newPORel = () => {
        const { data, poDetail } = this.state;
        if (data.poNum == 0) {
            message.warning("请先创建采购订单");
            return;
        }
        if (poDetail.poLine == 0) {
            message.warning("请先创建采购分录");
            return;
        }
        var value = {
            poNum: data.poNum,
            poLine: poDetail.poLine,
            warehouseCode: '',
            promiseDt: data.promiseDate,
            dueDate: data.promiseDate,
            tranType: 'PUR-STK'
        };
        Request.post(apiURLPORel + 'New', value).then((response) => {
            if (response) {
                this.setState({ loading: true });
                if (response.success) {
                    var data = response.result.data;
                    if (data.promiseDt)
                        data.promiseDt = moment(data.promiseDt)
                    if (data.dueDate)
                        data.dueDate = moment(data.dueDate)
                    this.formRef.current.setFieldsValue({ PORel: data });
                    this.setState({ defTab: '3' });
                }
                else {
                    message.error(response.error.message);
                }
                this.setState({ loading: false });
            }
        });
    }
    setPODetail = (row: any) => {
        this.setState({ poDetail: row, defTab: '2' });
        this.formRef.current.setFieldsValue({ PODetail: row });
        this.getPORel(row.items);
    }
    setPORel = (row: any) => {
        this.setState({ poRel: row, defTab: '3' });
        if (row.promiseDt)
            row.promiseDt = moment(row.promiseDt);
        if (row.dueDate)
            row.dueDate = moment(row.dueDate);
        this.formRef.current.setFieldsValue({ PORel: row });
    }
    delPoD = (id: any) => {
        const { data } = this.state;
        Request.del(apiURLPODetail + "Delete?id=" + id).then((response) => {
            if (response) {
                if (response.success) {
                    this.getPO(data.poNum);
                }
                else {
                    message.error(response.error.message);
                }
            }
        });
    }
    delPoR = (id: any) => {
        const { poDetail } = this.state;
        Request.del(apiURLPORel + "Delete?id=" + id).then((response) => {
            if (response) {
                if (response.success) {
                    this.getPORel(poDetail.items);
                }
                else {
                    message.error(response.error.message);
                }
            }
        });
    }
    delPatchD = () => {
        const { selectedRowKeys, dataSource } = this.state
        let _this = this
        confirm({
            title: '警告',
            icon: <ExclamationCircleOutlined />,
            content: '删除后将不可恢复，确定删除？',
            onOk() {
                _this.props.dispatch({
                    type: 'Abp/delPatch',
                    payload: selectedRowKeys,
                    control: 'PODetail'
                }).then(() => {
                    let lists = dataSource.filter((o: any) => selectedRowKeys.indexOf(o.id) < 0)
                    _this.setState({ dataSource: lists })
                })
            },
        });
    }
    delPatchR = () => {
        const { selectedRowKeys2, dataSource2 } = this.state
        let _this = this
        confirm({
            title: '警告',
            icon: <ExclamationCircleOutlined />,
            content: '删除后将不可恢复，确定删除？',
            onOk() {
                _this.props.dispatch({
                    type: 'Abp/delPatch',
                    payload: selectedRowKeys2,
                    control: 'PORel'
                }).then(() => {
                    let lists = dataSource2.filter((o: any) => selectedRowKeys2.indexOf(o.id) < 0)
                    _this.setState({ dataSource2: lists })
                })
            },
        });
    }
    handleMenuClick = (e: any) => {
        if (e.key === "1") {
            this.newPO();
        }
        else if (e.key === "2") {
            this.newPODetail();
        }
        else {
            this.newPORel();
        }
    }
    tabSwitch = (key: any) => {
        this.setState({ defTab: key });
    }
    setCurrent = (part?: any) => {
        if (part) {
            var PODetail: any = {};
            PODetail.partNum = part.partNum;
            PODetail.lineDesc = part.partDescription;
            PODetail.ium = part.ium;
            this.formRef.current.setFieldsValue({ PODetail });
            this.setState({ partRevs: part.revs });
        }
        this.setState({ visible2: false });
    }
    onSelectChange = (selectedRowKeys: any) => {
        this.setState({ selectedRowKeys });
    };
    onSelectChange2 = (selectedRowKeys2: any) => {
        this.setState({ selectedRowKeys2 });
    };
    setPORelJob = (item: any) => {
        let PORel = {
            jobNum: item.jobNum,
            jobSeq: item.jobSeq,
            assemblySeq: item.assemblySeq,
            relQty: item.requiredQty,
            ium: item.ium,
        }
        this.formRef.current.setFieldsValue({ PORel });
    }
    doPrint = () => {
        const { data } = this.state;
        let LODOP = getLodop();
        LODOP.PRINT_INIT("采购单" + data.poNum);  //打印初始化
        let strStyle = `<style></style> `;
        LODOP.ADD_PRINT_HTM(20, "5%", "90%", 450, strStyle + this.printArea.innerHTML);
        LODOP.PREVIEW();  //最后一个打印(预览)语句
    };
    render() {
        const { data, dataSource, dataSource2, defTab, selectedRowKeys, selectedRowKeys2, tranType } = this.state;
        const layout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 19 },
        };
        const columns = [
            {
                title: '项目',
                dataIndex: 'poLine',
                key: 'poLine',
            },
            {
                title: '未结',
                dataIndex: 'openLine',
                key: 'openLine',
                render: (text: boolean) => (
                    <Checkbox checked={text} />
                )
            },
            {
                title: '物料编码',
                dataIndex: 'partNum',
                key: 'partNum',
            },
            {
                title: '描述',
                dataIndex: 'lineDesc',
                key: 'lineDesc',
            },
            {
                title: '数量',
                dataIndex: 'orderQty',
                key: 'orderQty',
            },
            {
                title: '单价',
                dataIndex: 'unitCost',
                key: 'unitCost',
            },
            {
                title: '操作',
                render: (record: any) =>
                    dataSource.length >= 1 ? (
                        <Popconfirm title="确定删除?" onConfirm={() => this.delPoD(record.id)}>
                            <a>删除</a>
                        </Popconfirm>
                    ) : null,
            },
        ];
        const columnRel = [
            {
                title: '项目',
                dataIndex: 'poRelNum',
                key: 'PORelNum',
            },
            {
                title: '未结',
                dataIndex: 'openRelease',
                render: (text: boolean) => (
                    <Checkbox checked={text} />
                )
            },
            {
                title: '采购类型',
                dataIndex: 'tranType',
                key: 'tranType',
            },
            {
                title: '采购数量',
                dataIndex: 'relQty',
                key: 'relQty',
            },
            {
                title: '承诺日期',
                dataIndex: 'promiseDt',
                key: 'promiseDt',
                render: (text: any) => (
                    <span>{moment(text).format('YYYY-MM-DD')}</span>
                )
            },
            {
                title: '到期日',
                dataIndex: 'dueDate',
                key: 'dueDate',
                render: (text: any) => (
                    <span>{moment(text).format('YYYY-MM-DD')}</span>
                )
            },
            {
                title: '操作',
                render: (record: any) =>
                    dataSource2.length >= 1 ? (
                        <Popconfirm title="确定删除?" onConfirm={() => this.delPoR(record.id)}>
                            <a>删除</a>
                        </Popconfirm>
                    ) : null,
            },

        ];
        const columnJobItem = [
            {
                title: '工单号',
                dataIndex: 'jobNum',
            },
            {
                title: '半成品号',
                dataIndex: 'assemblySeq',
            },
            {
                title: '物料号',
                dataIndex: 'jobSeq',
            },
            {
                title: '物料编码',
                dataIndex: 'partNum',
            },
            {
                title: '描述',
                dataIndex: 'partDescription',
            },
            {
                title: '需求量',
                dataIndex: 'requiredQty',
            },
            {
                title: '单位',
                dataIndex: 'ium',
            },
        ]
        const columnOrderRel = [
            {
                title: '订单号',
                dataIndex: 'orderNum',
            },
            {
                title: '分录',
                dataIndex: 'orderLine',
            },
            {
                title: '发货行',
                dataIndex: 'orderRelNum',
            },
            {
                title: '物料编码',
                dataIndex: 'partNum',
            },
            {
                title: '描述',
                dataIndex: 'lineDesc',
            },
            {
                title: '需求量',
                dataIndex: 'ourReqQty',
            },
            {
                title: '单位',
                dataIndex: 'ium',
            },
        ]
        const selectRev = <Select
            placeholder="选择版本" >
            {
                this.state.partRevs?.map((item: any) => {
                    return (<Select.Option key={item} value={item}>{item}</Select.Option>)
                })
            }
        </Select>
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };
        const rowSelection2 = {
            selectedRowKeys2,
            onChange: this.onSelectChange2,
        };
        return (
            <PageHeaderWrapper>
                <Form {...layout} ref={this.formRef} onFinish={this.onFinish} >
                    <Space style={{ marginBottom: 8 }}>
                        <Dropdown overlay={
                            <Menu onClick={this.handleMenuClick}>
                                <Menu.Item key="1" icon={<RightOutlined />}>
                                    新建订单
                                </Menu.Item>
                                <Menu.Item key="2" icon={<RightOutlined />}>
                                    新建分录
                                </Menu.Item>
                                <Menu.Item key="3" icon={<RightOutlined />}>
                                    新建收货行
                                </Menu.Item>
                            </Menu>}>
                            <Button type="primary" icon={<PlusOutlined />}>
                                新增 <DownOutlined />
                            </Button>
                        </Dropdown>
                        <Button type="primary" htmlType="submit">保存</Button>
                        <Button type="primary" icon={<SyncOutlined />} onClick={() => this.getPO(data)}>刷新</Button>
                        <Button type="ghost" icon={<ImportOutlined />}>导入</Button>
                        <Button type="ghost" icon={<PrinterOutlined />} onClick={this.doPrint}>打印</Button>
                    </Space>
                    <Row gutter={[16, 16]}>
                        <Col span={12}>
                            <Card>
                                <Tabs defaultActiveKey={defTab} activeKey={defTab} onChange={this.tabSwitch}>
                                    <TabPane tab="汇总" key="1">
                                        <Form.Item
                                            name={['POHeader', 'id']} label="ID" hidden>
                                            <Input disabled />
                                        </Form.Item>
                                        <Form.Item label="采购单号" style={{ marginBottom: 0 }}>
                                            <Input.Group compact>
                                                <PoSelect
                                                    width={144}
                                                    noStyle
                                                    name={['POHeader', 'poNum']}
                                                    rules={[{ required: true, message: "请输入采购单号" }]}
                                                    setCurrent={this.getPO} />
                                                <Form.Item
                                                    name={['POHeader', 'approve']}
                                                    valuePropName="checked"
                                                    style={{ marginLeft: 20 }}>
                                                    <Checkbox>已核准</Checkbox>
                                                </Form.Item>
                                            </Input.Group>
                                        </Form.Item>
                                        <Form.Item
                                            name={['POHeader', 'promiseDate']}
                                            label="承诺日期"
                                            rules={[{ required: true, message: "请选择承诺日期" }]}>
                                            <DatePicker />
                                        </Form.Item>
                                        <Form.Item
                                            name={['POHeader', 'poType']}
                                            label="采购类型"
                                            rules={[{ required: true, message: "请选择采购类型" }]}>
                                            <Select
                                                style={{ width: 200 }}>
                                                <Select.Option value="ipo">国内采购</Select.Option>
                                                <Select.Option value="opo">海外采购</Select.Option>
                                            </Select>
                                        </Form.Item>

                                        <EmpSelect required={true} width={200} name={['POHeader', 'buyerID']} label="采购员" />
                                        <VendorSelect required={true} showSearch={true} width={200} name={['POHeader', 'vendorNum']} label="供应商" />
                                        <CateSelect layout="Terms" width={200} name={['POHeader', 'termsCode']} label="付款条款" />
                                        <CateSelect layout="Currency" width={200} name={['POHeader', 'currencyCode']} label="货币" />
                                        <CateSelect layout="ShipVia" width={200} name={['POHeader', 'shipViaCode']} label="运输方式" />
                                        <Form.Item
                                            name={['POHeader', 'entryPerson']}
                                            rules={[{ required: true, message: "请输入采购编号" }]}
                                            label="录入人员">
                                            <Input style={{ width: 120 }} />
                                        </Form.Item>
                                    </TabPane>
                                    <TabPane tab="分录" key="2">
                                        <Form.Item
                                            hidden
                                            name={['PODetail', 'id']} label="ID">
                                            <Input disabled />
                                        </Form.Item>
                                        <Form.Item
                                            hidden
                                            name={['PODetail', 'poNum']} label="ID">
                                            <Input disabled />
                                        </Form.Item>
                                        <Form.Item
                                            name={['PODetail', 'poLine']}
                                            label="分录">
                                            <InputNumber readOnly disabled />
                                        </Form.Item>
                                        <Form.Item label="物料编码">
                                            <Input.Group compact>
                                                <PartSelect name={['PODetail', 'partNum']} noStyle width={200} required={true} placeholder="物料编码" setCurrent={this.setCurrent} />
                                                <Form.Item name={['PODetail', 'ium']} noStyle>
                                                    <Input style={{ width: 80 }} placeholder="单位" disabled />
                                                </Form.Item>
                                                <Form.Item name={['PODetail', 'revisionNum']} noStyle>
                                                    {selectRev}
                                                </Form.Item>
                                            </Input.Group>
                                        </Form.Item>
                                        <Form.Item
                                            name={['PODetail', 'lineDesc']}
                                            label="物料描述">
                                            <Input.TextArea readOnly disabled />
                                        </Form.Item>
                                        <Form.Item
                                            name={['PODetail', 'unitCost']}
                                            label="单价"
                                            rules={[{ required: true, message: "请输入单价" }]}>
                                            <Input prefix="￥" suffix="RMB" style={{ width: 200 }} />
                                        </Form.Item>
                                        <Form.Item
                                            name={['PODetail', 'orderQty']}
                                            label="数量"
                                            rules={[{ required: true, message: "请输入含税价" }]}>
                                            <InputNumber min={0} disabled />
                                        </Form.Item>
                                        <Form.Item wrapperCol={{ offset: 5 }}>
                                            <Input.Group compact>
                                                <Form.Item
                                                    name={['PODetail', 'taxable']}
                                                    valuePropName="checked">
                                                    <Checkbox>可征税</Checkbox>
                                                </Form.Item>
                                                <Form.Item
                                                    name={['PODetail', 'openLine']}
                                                    valuePropName="checked">
                                                    <Checkbox>未结</Checkbox>
                                                </Form.Item>
                                            </Input.Group>
                                        </Form.Item>
                                    </TabPane>
                                    <TabPane tab="收货" key="3">
                                        <Form.Item
                                            hidden
                                            name={['PORel', 'id']}>
                                            <Input />
                                        </Form.Item>
                                        <Form.Item
                                            hidden
                                            name={['PORel', 'poNum']}>
                                            <Input />
                                        </Form.Item>
                                        <Form.Item
                                            hidden
                                            name={['PORel', 'poLine']}>
                                            <Input />
                                        </Form.Item>
                                        <Form.Item
                                            name={['PORel', 'poRelNum']} label="收货行">
                                            <InputNumber disabled />
                                        </Form.Item>
                                        <Form.Item
                                            name={['PORel', 'promiseDt']}
                                            label="承诺日期"
                                            rules={[{ required: true, message: "请选择承诺日期" }]}>
                                            <DatePicker />
                                        </Form.Item>
                                        <Form.Item
                                            name={['PORel', 'dueDate']}
                                            label="到日期"
                                            rules={[{ required: true, message: "请选择到日期" }]}>
                                            <DatePicker />
                                        </Form.Item>
                                        <Form.Item
                                            name={['PORel', 'tranType']}
                                            label="采购类型"
                                            rules={[{ required: true, message: "请选择采购类型" }]}>
                                            <Radio.Group name="radiogroup" onChange={(e: any) => this.setState({ tranType: e.target.value })}>
                                                <Radio value="PUR-STK">库存采购</Radio>
                                                <Radio value="PUR-MTL">工单采购</Radio>
                                                <Radio value="PUR-SUB">外协加工</Radio>
                                                <Radio value="PUR-SO">订单采购</Radio>
                                                <Radio value="PUR-UKN">其它采购</Radio>
                                            </Radio.Group>
                                        </Form.Item>
                                        <Form.Item label="关联工单" hidden={tranType != 'PUR-MTL'}>
                                            <Input.Group compact>
                                                <Form.Item
                                                    name={['PORel', 'jobNum']}
                                                    noStyle>
                                                    <Input style={{ width: 100 }} />
                                                </Form.Item>
                                                <Form.Item
                                                    name={['PORel', 'assemblySeq']}
                                                    noStyle>
                                                    <Select placeholder="半成品"> </Select>
                                                </Form.Item>
                                                <Form.Item
                                                    name={['PORel', 'jobSeq']}
                                                    noStyle>
                                                    <Select placeholder="物料号"> </Select>
                                                </Form.Item>
                                                <Form.Item noStyle>
                                                    <ItemSelect
                                                        width={780}
                                                        control='JobHead'
                                                        columns={columnJobItem}
                                                        text="选择"
                                                        title="工单物料"
                                                        act="getItems"
                                                        setCurrent={this.setPORelJob} />
                                                </Form.Item>
                                            </Input.Group>
                                        </Form.Item>
                                        <Form.Item label="销售订单" hidden={tranType != 'PUR-SO'}>
                                            <Input.Group compact>
                                                <Form.Item
                                                    name={['PORel', 'orderNum']}
                                                    noStyle>
                                                    <Input style={{ width: 100 }} />
                                                </Form.Item>
                                                <Form.Item
                                                    name={['PORel', 'orderLine']}
                                                    noStyle>
                                                    <Select placeholder="销售分录"> </Select>
                                                </Form.Item>
                                                <Form.Item
                                                    name={['PORel', 'orderRelNum']}
                                                    noStyle>
                                                    <Select placeholder="发货行"> </Select>
                                                </Form.Item>
                                                <Form.Item noStyle>
                                                    <ItemSelect
                                                        width={780}
                                                        control='OrderHed'
                                                        columns={columnOrderRel}
                                                        text="选择"
                                                        title="销售订单"
                                                        act="getItems"
                                                        setCurrent={this.setPORelJob} />
                                                </Form.Item>
                                            </Input.Group>
                                        </Form.Item>
                                        <Form.Item label="采购数量">
                                            <Input.Group compact>
                                                <Form.Item
                                                    noStyle
                                                    name={['PORel', 'relQty']}
                                                    rules={[{ required: true, message: "采购数量必填" }]}>
                                                    <InputNumber min={0} />
                                                </Form.Item>
                                                <Form.Item
                                                    noStyle
                                                    name={['PORel', 'ium']}>
                                                    <Input style={{ width: 50 }} placeholder="IUM" />
                                                </Form.Item>
                                            </Input.Group>
                                        </Form.Item>
                                        <Form.Item label="总账科目">
                                            <Input.Group compact>
                                                <Form.Item
                                                    name={['PORel', 'GLAccount']}>
                                                    <Input style={{ width: 100 }} />
                                                </Form.Item>
                                                <Form.Item
                                                    name={['PORel', 'GLAccountDesc']}>
                                                    <Input style={{ width: 200 }} placeholder="总账科目描述" />
                                                </Form.Item>
                                                <Form.Item
                                                    name={['PORel', 'openRelease']}
                                                    valuePropName="checked">
                                                    <Checkbox>未结</Checkbox>
                                                </Form.Item>
                                            </Input.Group>
                                        </Form.Item>
                                    </TabPane>
                                </Tabs>
                            </Card>
                        </Col>
                        <Col span={12}>
                            <Card>
                                <Tabs defaultActiveKey="1" >
                                    <TabPane tab="分录项" key="1">
                                        <Table
                                            rowKey="id"
                                            size="small"
                                            columns={columns}
                                            loading={this.state.loading}
                                            dataSource={this.state.dataSource}
                                            rowSelection={rowSelection}
                                            onRow={record => {
                                                return {
                                                    onDoubleClick: event => { this.setPODetail(record) },
                                                };
                                            }}
                                        />
                                        <Row gutter={16}>
                                            <Col span={12}><Button block type="dashed" icon={<PlusOutlined />} onClick={this.newPODetail}>添加分录</Button></Col>
                                            <Col span={12}><Button block danger icon={<CloseOutlined />} onClick={this.delPatchD}>删除分录</Button></Col>
                                        </Row>
                                    </TabPane>
                                    <TabPane tab="收货行" key="2">
                                        <Table
                                            rowKey="id"
                                            size="small"
                                            columns={columnRel}
                                            loading={this.state.loading2}
                                            dataSource={this.state.dataSource2}
                                            rowSelection={rowSelection2}
                                            onRow={record => {
                                                return {
                                                    onDoubleClick: event => { this.setPORel(record) },
                                                };
                                            }} />

                                        <Row gutter={16}>
                                            <Col span={12}><Button block type="dashed" icon={<PlusOutlined />} onClick={this.newPORel}>添加收货行</Button></Col>
                                            <Col span={12}><Button block danger icon={<CloseOutlined />} onClick={this.delPatchR}>删除收货行</Button></Col>
                                        </Row>
                                    </TabPane>
                                </Tabs>
                            </Card>
                        </Col>
                    </Row>
                </Form>
                <div ref={(ref) => this.printArea = ref} hidden><PoContract data={data} /></div>
            </PageHeaderWrapper>
        )
    }
}
export default connect(({ Abp }: API.IConnectState) => ({
    response: Abp.response,
    currentUser: Abp.currentUser,
}))(ViewPage);